<!-- 
	信号显示icon
-->
<template>
    <view class="rssi-wrap" :style="{ 'height': size + 'px' }">
        <view class="rssi-item" v-for="(item, index) in rssi" :key="index" :style="{
            'height': size * (item / 100) + 'px',
            'width': size / 4 + 'px'}">
            <view class="rssi-bg" :style="{ width: size / 4 + 'px' }"></view>
            <view class="rssi-size" v-if="item <= rssiValue" :style="{
                'width': size / 4 + 'px',
                'background-color': rssiColor}"></view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        // 信号图标大小
        size: {
            type: Number,
            default: 12
        },
        // 信号强度颜色
        rssiColor: {
            type: String,
            default: '#027AFE'
        },
        // 信号强度
        value: {
            type: Number,
            default: 50
        }
    },
    computed: {
        // 信号
        // -95 0
        // -95 - -85 1
        // -85 - -80 2
        // -80 - -75 3
        // >-75 4
        rssiValue() {
            const val = this.value
            if (val < -95) return 0
            if (val > -95 && val < -85) return 25
            if (val > -85 && val < -80) return 50
            if (val > -80 && val < -75) return 75
            if (val > -75 ) return 100
        }
    },
    data() {
        return {
            rssi: [25, 50, 75, 100],
        }
    }
}
</script>

<style>
.rssi-wrap {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}
.rssi-item {
    position: relative;
    margin-right: 2px;
}
.rssi-bg,
.rssi-size {
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 2px;
}
.rssi-bg {
    background-color: #ddd;
    z-index: 0;
}
.rssi-size {
    z-index: 1;
}
</style>
